<!--author:grx 王佳欣-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>答题页面</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            /*导航栏样式*/
            .navbar {
                background-color: #222;
            }
            #daohang {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: transparent;
            }
            li {
                float: left;
            }
            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            /*!*鼠标移动到选项上修改背景颜色 *!*/
            li a:hover {
                background-color: #111;
            }
            .active {
                background-color: black;
            }

            .col-sm-new {
                border-radius: 15px;
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%; }
            #submitButton{
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 5px;
                padding-bottom: 5px;
                color: #fff;
                background-color: #5bc0de;
                border: 0;
                border-radius: 8px;
            }
            #submitButton:hover{
                background-color: #97d3e7;
            }
        </style>
    </head>
    <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
        <a class="navbar-brand font-weight-bold" href="index.html">别叫我 OJ </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <ul id="daohang">
            <li>
                <div class="active" id="detail" align="right">
                    <a style="color: white" href="questionDetail.html" onclick="findQuestion()">问题详情</a>
                </div>
            </li>
            <li>
                <div id="remind" align="right">
                    <a style="color: white" href="submitRecord.html">提交记录</a>
                </div>
            </li>
            <li>
                <div id="analyze" align="right">
                    <a style="color: white" href="answer.html">题解</a>
                </div>
            </li>
        </ul>
        <div class="collapse navbar-collapse" id="topMenu">
            <ul class="navbar-nav ml-auto">
                <div style="margin:5px" id="backToIndex" align="right">
                    <a style="color: white" href="index.html"> 返回首页</a>
                </div>
                <div style="margin:5px" id="javaoj" align="right">
                    <a style="color: white" href="login.html" onclick="logout()"> 退出登录</a>
                </div>
            </ul>
        </div>
    </nav>

        <!--components-->
        <section class="my-5 pt-5">
            <div class="container">
                <div class="row mt-4">
                    <h3 id="questionTitle"></h3>
                    <div class="col-sm-new pb-4">
                        <label for="codeEditor">问题描述</label>
                        <div class="jumbotron jumbotron-fluid">
                            <div class="container" id="questionDesc">

                            </div>
                        </div>
                    </div>
                    <div  class="col-sm-new pb-4">
                        <label for="codeEditor">输入格式</label>
                        <div class="jumbotron jumbotron-fluid">
                            <div class="container" id="inputDesc">

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-new pb-4">
                        <label for="codeEditor">输出格式</label>
                        <div class="jumbotron jumbotron-fluid">
                            <div class="container" id="outputDesc">

                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-sm-new pb-4">
                            <div class="form-group">
                                <div style="display: inline-block;margin-right: 200px;margin-left: 300px">
                                    <label for="memoryLimit">内存限制</label>
                                    <div>
                                        <div class="container" id="memoryLimit" style="padding-top:10px;text-align:center;width: 80px; height: 50px;display: inline-block; background-color: #f5f4f4;
  border-radius: 0.3rem;">

                                        </div>
                                        <p style="float: right;margin-top:5px;margin-left: 20px;font-size: 20px">MB</p>
                                    </div>
                                </div>
                                <div style="display: inline-block;margin-right: 200px">
                                    <label for="timeLimit">时间限制</label>
                                    <div>
                                        <div class="container" id="timeLimit" style="padding-top:10px;text-align:center;width: 80px; height: 50px;display: inline-block; background-color: #f5f4f4;
  border-radius: 0.3rem;">
                                        </div>
                                        <p style="float: right;margin-top:5px;margin-left: 20px;font-size: 20px">S</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-new pb-4">
                        <label for="input">输入样例</label>
                        <div class="jumbotron jumbotron-fluid">
                            <div class="container" id="input">

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-new pb-4">
                        <label for="output">输出样例</label>
                        <div class="jumbotron jumbotron-fluid">
                            <div class="container" id="output">

                            </div>
                        </div>
                    </div>
                </div>

                <h2> 代码编辑框 </h2>
                <div class="row mb-5" id="forms">
                    <div class="col-sm-new">


                        <div class="row mt-4">
                            <div class="col-sm-new pb-4">
                                <form role="form">
                                    <div class="editor-header">
                                        <select id="language" class="form-control form-control-plus" onchange="initAce(false)">
                                            <option value="ace/mode/c_cpp">语言</option>
                                            <option value="c">C</option>
                                            <option value="c++" selected="selected">C++</option>
                                            <option value="java">Java</option>
                                            <option value="python">Python</option>
                                        </select>
                                        <select id="theme" class="form-control form-control-plus" onchange="initAce(false)">
                                            <option>环境配色</option>
                                            <option value="ace/theme/twilight">twilight</option>
                                            <option value="ace/theme/eclipse" selected>eclipse</option>
                                            <option value="ace/theme/dracula">dracula</option>
                                        </select>
                                        <div class="flex-btn" onclick="expand('spanid')">
                                            <span class="glyphicon glyphicon-resize-full" id="spanid"></span>
                                        </div>
                                    </div>
                                </form>
                                <form>
                                    <div class="form-group">
                                        <label for="codeEditor"></label>
                                        <div id="editor" style="min-height:400px">
                                            <textarea class="form-control" id="codeEditor" style="width: 100%;  height:400px;"></textarea>
                                        </div>


                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <button style="margin-left: 1000px;width: 160px" type="button" class="btn btn-primary" id="submitButton" onclick="submitCode()">提交</button>

                <div class="result row mt-4">
                    <div class="col-sm-new pb-4 col-sm-new">
                        <label for="status" style="font-size: 20px">代码运行状态: <span id="status" style="font-size: 20px"></span></label>
                    </div>
                </div>
            </div>
        </section>

        <!--footer-->
        <section class="py-5 bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                        <p class="pt-2 text-muted">
                            &copy; by <a href="aboutUs.html" target="_blank">别叫我们组</a>
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <script src="js/jquery.min.js"></script>
        <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>-->
        <!-- 引入 ace.js -->
        <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
        <script>
            // $("#questionDetail").href("questionDetail.html?questionId=" + localStorage.getItem("questionId"));
            var userId=localStorage.getItem("userId");
            var password=localStorage.getItem("password");
            //获取用户登录信息，获取失败则返回登录页面
            function getUser(){
                if (userId==null){
                    location.assign("login.html");
                }
            }
            function logout(){
                localStorage.clear();
            }
            getUser();

            function findQuestion () {
                $.ajax({
                    url:"http://localhost:8020/question/findQuestion/" + localStorage.getItem("questionId"),
                    contentType:"application/json; charset=utf-8",
                    success:function (object) {
                        console.log(object);
                        const data = object.data;
                        // 题目
                        $("#questionTitle").text(data.id + ". " + data.title);
                        // 问题描述
                        $("#questionDesc").text(data.description);
                        // 输入格式
                        $("#inputDesc").text(data.inputDescription);
                        // 输出格式
                        $("#outputDesc").text(data.outputDescription);
                        // 内存限制
                        $("#memoryLimit").text(data.memoryLimit);
                        // 时间限制
                        $("#timeLimit").text(data.timeLimit);
                        // 输入样例
                        const input = JSON.parse(data.inputList).input1;
                        $("#input").text(input);
                        // 输出样例
                        const output = JSON.parse(data.outputList).output1;
                        $("#output").text(output);
                    }
                })
            }

            function initAce(arg) {
                let language = $("#language").val();
                let mode;
                if (language == "java") mode = "java";
                else if (language == "c++") mode = "c_cpp";
                else if (language == "c") mode = "c9search";
                else if (language == "python") mode = "python";
                console.log(mode);
                console.log($("#theme").val());
                // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
                let editor = ace.edit("editor");
                editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true
                });
                editor.setTheme($("#theme").val());
                editor.session.setMode("ace/mode/"+mode);
                editor.resize();
                if (arg) {
                    editor.setValue("");
                }
                document.getElementById('editor').style.fontSize = '20px';

                return editor;
            }
            let editor = initAce(true);

<!--            返回当前 URL 的查询部分（问号 ? 之后的部分）-->
            // 1、解析地址,获取shareId参数
            function getQueryString(value) {
                const reg = new RegExp("(^|&)" + value + "=([^&]*)(&|$)", "i");
                const r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }
            // 2、访问地址
            const questionId = getQueryString('questionId');
            if (questionId != "" && questionId != null) {
                localStorage.setItem("questionId", questionId);
            }
            console.log(questionId);

            /*document.cookie="problemId="+questionId;
            console.log(questionId + "---------");*/

            $(document).ready(findQuestion())

            // 提交代码
            function submitCode() {
                // 获取日期
                let now = new Date();
                let year = now.getFullYear();
                let month = now.getMonth() + 1;
                let day = now.getDate();
                let hour = now.getHours();
                let minute = now.getMinutes();
                let second = now.getSeconds();
                console.log("month:"+month);

                let language = $("#language").val();

                console.log(editor.getValue());
                let record = {
                    "userId":localStorage.getItem("userId"),
                    "questionId":localStorage.getItem("questionId"),
                    "language":language,
                    "answer":editor.getValue(),
                    "createTime":year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
                };
                console.log(record);
                $.ajax({
                    url:"http://192.168.47.129:8010/user/submitCode",
                    type:"post",
                    contentType:"application/json; charset=utf-8",
                    data:JSON.stringify(record),
                    success:function (object) {
                        console.log(object);
                        const data = object.data;
                        console.log(data);
                        // 状态I
                        if (data.status.includes("Accepted")) {
                            $(".result").html("<div class='col-sm-12 pb-4'>\n" +
                                "<label for='status' style='font-size: 20px'>代码运行状态: <span id='status' style='font-size: 20px'></span></label>\n" +
                                "</div>");
                            $("#status").text(data.status);
                            let status = document.getElementById("status");
                            status.style.color = "green";
                        } else if (data.status.includes("Error")) {
                            $("#status").text(data.status);
                            let status = document.getElementById("status");
                            status.style.color = "red";
                            $(".result").append("<div class='col-sm-12 pb-4'>\n" +
                                "<label for='reason' style='font-size: 20px'>出错原因</label>\n" +
                                "<div class='jumbotron jumbotron-fluid'>\n" +
                                "<div class='container'>\n" +
                                "<pre id='reason' style='color: #222'>\n" +
                                "\n" +
                                "</pre>\n" +
                                "</div>\n" +
                                "</div>\n" +
                                "</div>");
                            $("#reason").text(data.reason);
                        } else if (data.status.includes("Wrong") || data.status.includes("非法")) {
                            $("#status").text(data.status);
                            let status = document.getElementById("status");
                            status.style.color = "red";
                        } else {
                            $("#status").text(data.status);
                            let status = document.getElementById("status");
                            status.style.color = "red";
                        }
                    }
                })
            }
        </script>
    </body>
</html>
